<template>
	<view class="page">
        <uni-nav-bar :fixed="true" :statusBar="true" title="戴森球计划-量化" :left-text="type[currentIndex]" @clickLeft="bindNavLeft"></uni-nav-bar>
        
        <scroll-view v-if="currentIndex" :scroll-x="currentIndex" class="grid">
            <view class="grid__main">
                <uni-grid column="12" :square="false" borderColor="#000" @change="changeGrid">
                    <block v-for="(item, index) of list" :key="item.id">
                        <uni-grid-item :index="index">
                            <view class="grid__item" v-if="item.is_not_data">
                                <view class="grid__icon"></view>
                                <text class="grid__txt"></text>
                            </view>
                            <view class="grid__item" v-else :class="{'grid__item--bg': !item.is_manual_operation}">
                                <text class="grid__size" v-if="item.production_size > 1">x{{item.production_size}}</text>
                                <image class="grid__icon" :src="item.imgUrl" mode="aspectFit"></image>
                                <text class="grid__txt">{{item.name}}</text>
                            </view>
                        </uni-grid-item>
                    </block>
                </uni-grid>
            </view>
        </scroll-view>
        <view class="grid" v-else>
            <uni-grid column="6" :square="false" borderColor="#000" @change="changeGrid">
                <block v-for="(item, index) of list" :key="item.id">
                    <uni-grid-item :index="index">
                        <view class="grid__item">
                            <text class="grid__size" v-if="item.production_size > 1">x{{item.production_size}}</text>
                            <image class="grid__icon" :src="item.imgUrl" mode="aspectFit"></image>
                            <text class="grid__txt">{{item.name || ''}}</text>
                        </view>
                    </uni-grid-item>
                </block>
            </uni-grid>
        </view>
    </view>
</template>

<script>
    import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
    import uniGrid from '@/components/uni-grid/uni-grid.vue';
    import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
    import { materials, subassembly, facility } from '@/common/data.js';
    
	export default {
        components: {
            uniNavBar,
            uniGrid,
            uniGridItem
        },
		data() {
			return {
                type: ['矿物', '组件', '建筑'],
                currentIndex: 1,
			}
		},
        computed: {
            list() {
                switch(this.currentIndex){
                    case 0:
                        return materials;
                    case 1:
                        return subassembly;
                    case 2:
                        return facility;
                }
            }
        },
		onLoad() {
            
		},
		methods: {
            bindNavLeft(){
                uni.showActionSheet({
                    itemList: this.type,
                    success: (res) => {
                        this.currentIndex = res.tapIndex;
                    }
                });
            },
            changeGrid(e){
                if(!this.list[e.detail.index]) return;
                uni.setStorageSync('itemDetail', this.list[e.detail.index]);
                uni.navigateTo({
                    url: '/pages/detail/detail'
                });
            }
		}
	}
</script>

<style lang="scss">
    .page{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .grid{
        padding: 30rpx 0;
        width: 722rpx;
        
        &__main{
            width: 1600rpx;
        }
        
        &__item{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            background-color: #1e2631;
            width: 100%;
            padding: 8px 0;
            
            &--bg{
                background-color: #007AFF;
            }
        }
        
        &__size{
            position: absolute;
            right: 5px;
            color: #fff19c;
            font-size: 11px;
        }
        
        &__icon{
            display: block;
            width: 44px;
            height: 44px;
        }
        
        &__txt{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            height: 24px;
            line-height: 12px;
            text-align: center;
        }
    }
</style>
